<template>
  <!-- tab -->
  <el-dropdown class="plugins-nav" trigger="click" @command="click2Handler">
    <el-button class="plugins-nav-btn" type="text">
      <i class="jy-icon-form"></i> {{ tab }} <i class="jy-icon-arrow"></i>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu class="clear-ed plugins-comp-list" style="width: 500px;">
        <li class="comp-list-box" v-for="(item, index) in lists" :key="index">
          <span v-if="isShowMenu" class="comp-title" v-html="item.title"></span>
          <el-row class="comps-list">
            <el-dropdown-item
              v-for="(btnItem, btnIndex) in item.lists"
              :key="btnIndex"
              :command="btnItem">
              <el-button
                type="text"
                :icon="btnItem.icon"
                :disabled="btnItem.bIsDisabled">
                  {{btnItem.text}}
              </el-button>
            </el-dropdown-item>
          </el-row>
        </li>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
  export default {
    props: {
      tab: String,
      isShowMenu: {
        type: Boolean,
        default: true,
      },
      lists: {
        type: Array,
        default: [],
      },
    },
    emits: ['clickAction'],
    methods: {
      click2Handler(item) {
        if(item.bIsDisabled) return;
        this.$emit('clickAction', item);
      },
    },
  }
</script>

<style lang="scss">
  .plugins-comp-list{
    width: 800px !important;
    list-style: none;

    li.comp-list-box{
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      border-bottom: 1px solid #EDEFF2;

      .comp-title{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 99px;

        background: #F3F5FA;
        font-size: 12px;
        color: #43475C;

        p{
          margin-top: 10px;
          line-height: 1.3;
        }
      }
      .comps-list{
        flex: 1;
        width: 100%;
        min-width: 0;
        padding: 10px 0;
        margin-left: 20px;
        display: flex;
        flex-wrap: wrap;

        li{
          padding: 0;
          margin: 0;
          width: 33%;
        }
        li:active, :hover, :focus{
          background-color: inherit;
          color: inherit;
        }

        button{
          // width: 25%;
          text-align: left;
          margin: 0;
          padding: 10px;

          font-size: 14px;
          color: #43475C;
        }
        button:hover{
          color: #66b1ff;
        }
        button:active, :focus{
          color: #66b1ff;
          background-color: #ecf5ff;
        }
        button:disabled,
        button[disabled]{
          color: #c0c4cc;
        }
      }
    }
    li:nth-last-child(2) {
      border-bottom: none;
    }
  }
</style>
